<template lang="pug">
div(v-if='member')
  Form(:label-width=100, style='width: 500px')
    FormItem(label='绑定用户')
      //- UserAutocomplete(v-model='member.user')
      strong {{ member.user.name }}
    FormItem(label='显示头像', @click.native='showModal = true')
      //- img.img-responsive(:src='member.avatar')
      Avatar(icon='person', shape='square', size='large', :src='member.avatar')
      a(style='margin-left: 8px') [修改]
    FormItem(label='显示名称')
      Input(v-model='formData.name')
    FormItem(label='简介')
      Input(type='textarea', v-model='formData.intro')
    FormItem
      div
        Button(type='primary', :loading='loading' @click='submit') 保存
        | &nbsp;&nbsp;
        //- Button(type='error', @click='remove') 删除
        Button(type='ghost', @click='$router.go(-1)') 取消

  Modal.setting-modal(
    title='编辑头像'
    v-model='showModal',
    :width=600,
    :loading='true'
    @on-ok='upload("logo")',
    @on-cancel='resetUpload')
    div
      p.hint(style='margin-bottom: 8px') 新头像不允许涉及政治敏感与色情; 图片格式必须为：png,bmp,jpeg,jpg,gif；不可大于2M；建议使用png格式图片，以保持最佳效果；建议图片尺寸为144px*144px
      Upload(ref='upload',
        action='javascript:;',
        :show-upload-list='false',
        :before-upload='beforeUpload')
        Button(type='ghost', icon='ios-cloud-upload-outline') 选择图片
        //- div(item in uploadList)
        //- Progress(v-if="uploadItem.showProgress", :percent="uploadItem.percentage", hide-info)
      div
        p 预览
        img(:src='logoPreviewUrl()', style='width: 144px; height: 144px; border-radius: 6px;')
        img(:src='logoPreviewUrl()', style='width: 144px; height: 144px; margin-left: 16px; border-radius: 50%;')
</template>

<script>
import Api from '@/apis'
import fileApi from '@/apis/file'

import store from '@/store'
import UserAutocomplete from '@/components/UserAutocomplete'

export default {
  components: {
    UserAutocomplete
  },
  beforeRouteEnter (to, from, next) {
    Api.Group.getGroupMember(store.state.app.id, to.params.id)
      .then(data => next(vm => {
        vm.member = data
        vm.formData.name = data.name
        vm.formData.intro = data.intro
      }))
  },
  data () {
    return {
      loading: false,
      member: null,
      showModal: false,
      formData: {
        name: '',
        intro: '',
        avatar: null
      }
    }
  },
  mounted () {
    Api.Group.getGroupMember(this.$store.state.app.id, this.$route.params.id)
      .then(data => {
        this.member = data
        this.formData.name = data.name
        this.formData.intro = data.intro
      })
  },
  methods: {
    submit () {
      this.loading = true
      const pack = {
        gid: this.$store.state.app.id,
        id: this.$route.params.id,
        ...this.formData
      }
      Api.Group.patchMembership(pack).then(() => {
        this.loading = false
        this.$Message.success('保存成功')
        this.$router.push('/members')
      })
    },
    remove () {
      this.$Modal.info({
        title: '系统提示',
        content: '系统目前不允许删除人员'
      })
    },
    beforeUpload (file) {
      // console.log('before upload', file)
      this.file = file

      let reader = new FileReader()
      reader.onload = e => {
        this.uploadPreview = e.target.result
        this.$forceUpdate()
      }
      reader.readAsDataURL(file)

      return false
    },
    async upload (field) {
      let uri = this.uploadPreview.replace(`data:${this.file.type};base64,`, '')
      let data = {
        filename: [{ value: this.file.name }],
        data: [{ value: uri }]
      }
      try {
        const res = await fileApi.uploadImage(data)
        if (res.status === 201 && res.data.fid[0].value) {
          this.showModal = false
          this.member.avatar = this.uploadPreview
          this.formData.avatar = res.data.fid[0].value
          this.resetUpload()
        }
      } catch (e) {}
    },
    resetUpload () {
      this.uploadPreview = null
      this.file = null
    },
    logoPreviewUrl () {
      return this.uploadPreview || this.member.avatar || 'http://placehold.it/144x144'
    }
  }
}
</script>
